<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--><html lang="en"><!--<![endif]-->

<head>
<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<!-- Bootstrap Stylesheet -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" media="all">

<!-- jquery-ui Stylesheets -->
<link rel="stylesheet" href="assets/jui/css/jquery-ui.css" media="screen">
<link rel="stylesheet" href="assets/jui/jquery-ui.custom.css" media="screen">
<link rel="stylesheet" href="assets/jui/timepicker/jquery-ui-timepicker.css" media="screen">

<!-- Uniform Stylesheet -->
<link rel="stylesheet" href="plugins/uniform/css/uniform.default.css" media="screen">

<!-- Plugin Stylsheets first to ease overrides -->

<!-- End Plugin Stylesheets -->

<!-- Main Layout Stylesheet -->
<link rel="stylesheet" href="assets/css/fonts/icomoon/style.css" media="screen">
<link rel="stylesheet" href="assets/css/main-style.css" media="screen">

<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<title>MoonCake :: Responsive Admin Template - Bootstrap Elements</title>

</head>

<body data-show-sidebar-toggle-button="true" data-fixed-sidebar="false">

    <div id="customizer">
        <div id="showButton"><i class="icon-cogs"></i></div>
        <div id="layoutMode">
            <label class="checkbox"><input type="checkbox" class="uniform" name="layout-mode" value="boxed"> Boxed</label>
        </div>
    </div>
    
	<div id="style-changer"><a href="../simple/index.html"></a></div>

    <div id="wrapper">
        <header id="header" class="navbar navbar-inverse">
            <div class="navbar-inner">
                <div class="container">
					<div class="brand-wrap pull-left">
						<div class="brand-img">
							<a class="brand" href="#">
								<img src="assets/images/logo.png" alt="" style="width: 117px; height: 21px;">
							</a>
						</div>
					</div>
                    
                    <div id="header-right" class="clearfix">
						<div id="nav-toggle" data-toggle="collapse" data-target="#navigation" class="collapsed">
							<i class="icon-caret-down"></i>
						</div>
						<div id="header-search">
							<span id="search-toggle" data-toggle="dropdown">
								<i class="icon-search"></i>
							</span>
							<form class="navbar-search">
								<input type="text" class="search-query" placeholder="Search">
							</form>
						</div>
                        <div id="dropdown-lists">
                            <div class="item-wrap">
                                <a class="item" href="#" data-toggle="dropdown">
                                    <span class="item-icon"><i class="icon-exclamation-sign"></i></span>
                                    <span class="item-label">Notifications</span>
                                    <span class="item-count">4</span>
                                </a>
                                <ul class="dropdown-menu">
                                    <li class="dropdown-item-wrap">
                                        <ul>
                                            <li>
                                                <a href="#">
                                                    <span class="thumbnail"><img src="assets/images/pp.jpg" alt=""></span>
                                                    <span class="details">
                                                        <strong>John Doe</strong> commented on your photo
                                                        <span class="time">13 minutes ago</span>
                                                    </span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <span class="thumbnail"><img src="assets/images/pp.jpg" alt=""></span>
                                                    <span class="details">
                                                        <strong>Jane Roe</strong> commented on your photo
                                                        <span class="time">27 minutes ago</span>
                                                    </span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <span class="thumbnail"><img src="assets/images/pp.jpg" alt=""></span>
                                                    <span class="details">
                                                        <strong>Billy John</strong> commented on your photo
                                                        <span class="time">43 minutes ago</span>
                                                    </span>
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li><a href="#">View all notifications</a></li>
                                </ul>
                            </div>
                            <div class="item-wrap">
                                <a class="item" href="#" data-toggle="dropdown">
                                    <span class="item-icon"><i class="icon-envelope"></i></span>
                                    <span class="item-label">Messages</span>
                                    <span class="item-count">16</span>
                                </a>
                                <ul class="dropdown-menu">
                                    <li class="dropdown-item-wrap">
                                        <ul>
                                            <li>
                                                <a href="#">
                                                    <span class="thumbnail"><img src="assets/images/pp.jpg" alt=""></span>
                                                    <span class="details">
                                                        <strong>John Doe</strong><br> Hello, do you have time to go out tomorrow?
                                                        <span class="time">13 minutes ago</span>
                                                    </span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <span class="thumbnail"><img src="assets/images/pp.jpg" alt=""></span>
                                                    <span class="details">
                                                        <strong>Jane Roe</strong><br> Hey, the reports said that you were...
                                                        <span class="time">27 minutes ago</span>
                                                    </span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <span class="thumbnail"><img src="assets/images/pp.jpg" alt=""></span>
                                                    <span class="details">
                                                        <strong>Billy John</strong><br> Can I borrow your new camera for taking...
                                                        <span class="time">About an hour ago</span>
                                                    </span>
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li><a href="mail.html">View all messages</a></li>
                                </ul>
                            </div>
                        </div>
                        
                        <div id="header-functions" class="pull-right">
                        	<div id="user-info" class="clearfix">
                                <span class="info">
                                	Welcome
                                    <span class="name">Shana-chan</span>
                                </span>
                            	<div class="avatar">
                                	<a class="dropdown-toggle" href="#" data-toggle="dropdown">
                                    	<img src="assets/images/pp.jpg" alt="Avatar">
                                    </a>
                                    <ul class="dropdown-menu pull-right">
                                    	<li><a href="profile.html"><i class="icol-user"></i> My Profile</a></li>
                                    	<li><a href="#"><i class="icol-layout"></i> My Invoices</a></li>                                        
                                        <li class="divider"></li>
                                        <li><a href="index.html"><i class="icol-key"></i> Logout</a></li>
                                    </ul>
                                </div>
                            </div>
                            <div id="logout-ribbon">
                            	<a href="index.html"><i class="icon-off"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        
        <div id="content-wrap">
        	<div id="content">
            	<div id="content-outer">
                	<div id="content-inner">
                    	<aside id="sidebar">
                        	<nav id="navigation" class="collapse">
                            	<ul>
                                	<li>
                                    	<span title="General">
                                    		<i class="icon-home"></i>
											<span class="nav-title">General</span>
                                        </span>
                                    	<ul class="inner-nav">
                                        	<li><a href="dashboard.html"><i class="icol-dashboard"></i> Dashboard</a></li>
                                        	<li><a href="../simple/dashboard.html"><i class="icol-plugin"></i> Simple Version</a></li>
                                        	<li><a href="affix.html"><i class="icol-pin"></i> Fixed Sidebar</a></li>
                                        	<li><a href="calendar.html"><i class="icol-calendar-2"></i> Calendar</a></li>
                                            <li><a href="icons.html"><i class="icol-lifebuoy"></i> Icons</a></li>
                                        	<li><a href="grids.html"><i class="icol-grid"></i> Grids</a></li>
                                        	<li><a href="typography.html"><i class="icol-font"></i> Typography</a></li>
                                        </ul>
                                    </li>
                                	<li>
                                    	<span title="Table">
                                    		<i class="icon-table"></i>
											<span class="nav-title">Table</span>
                                        </span>
                                    	<ul class="inner-nav">
                                        	<li><a href="tables.html"><i class="icol-style"></i> Static Tables</a></li>
                                        	<li><a href="responsive_tables.html"><i class="icol-hammer-screwdriver"></i> Responsive Tables</a></li>
                                        	<li><a href="data_tables.html"><i class="icol-table"></i> Data Tables</a></li>
                                            <li><a href="detail_view.html"><i class="icol-eye"></i> Detail View Table</a></li>
                                        </ul>
                                    </li>
                                	<li>
                                    	<span title="Statistic">
                                        	<i class="icon-graph"></i>
											<span class="nav-title">Statistic</span>
                                        </span>
                                    	<ul class="inner-nav">
                                        	<li><a href="statistic.html"><i class="icol-chart-curve"></i> Statistical Elements</a></li>
                                        	<li><a href="charts_gallery.html"><i class="icol-chart-pie"></i> Charts Gallery</a></li>
                                        </ul>
                                    </li>
                                	<li>
                                    	<span title="Form">
                                        	<i class="icon-list"></i>
											<span class="nav-title">Form</span>
                                        </span>
                                    	<ul class="inner-nav">
                                        	<li><a href="form_layouts.html"><i class="icol-layout-select"></i> Form Layouts</a></li>
                                        	<li><a href="form_elements.html"><i class="icol-ui-text-field-password"></i> Form Elements</a></li>
											<li><a href="form_wizard.html"><i class="icol-wand"></i> Form Wizard</a></li>
                                        	<li><a href="form_validation.html"><i class="icol-accept"></i> Form Validation</a></li>
                                        	<li><a href="form_cloning.html"><i class="icol-asterisk-orange"></i> Form Cloning</a></li>
                                            <li><a href="wysiwyg.html"><i class="icol-pencil"></i> WYSIWYG</a></li>
                                        </ul>
                                    </li>
                                	<li class="active">
                                    	<span title="Elements">
                                        	<i class="icon-cogs"></i>
											<span class="nav-title">Elements</span>
                                        </span>
                                    	<ul class="inner-nav">
                                        	<li class="active"><a href="ui_bootstrap.html"><i class="icol-ui-tab-content"></i> Bootstrap Elements</a></li>
											<li><a href="ui_components.html"><i class="icol-pipette"></i> Other Elements</a></li>
                                        	<li><a href="alerts.html"><i class="icol-error"></i> Alerts and Notifications</a></li>
											<li><a href="boxes.html"><i class="icol-cog"></i> Widget Boxes</a></li>
                                        	<li><a href="buttons.html"><i class="icol-joystick"></i> Buttons</a></li>
                                        	<li><a href="file_uploader.html"><i class="icol-computer"></i> File Uploader</a></li>
											<li><a href="file_manager.html"><i class="icol-databases"></i> File Manager</a>
                                        </ul>
                                    </li>
                                	<li>
                                    	<span title="Extra">
                                        	<i class="icon-gift"></i>
											<span class="nav-title">Extra</span>
                                        </span>
                                        <ul class="inner-nav">
                                            <li><a href="profile.html"><i class="icol-user"></i> Profile Page</a></li>
                                            <li><a href="mail.html"><i class="icol-email"></i> Mail Page</a></li>
                                            <li><a href="invoice.html"><i class="icol-blog"></i> Invoice Page</a></li>
                                            <li><a href="widgets.html"><i class="icol-ruby"></i> Custom Widgets</a></li>
                                            <li><a href="gallery.html"><i class="icol-images"></i> Image Gallery</a>
                                            <li><a href="contacts.html"><i class="icol-vcard"></i> Contact List</a></li>
                                            <li><a href="404.html"><i class="icol-error"></i> Error Page (404)</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </nav>
                        </aside>

                        <div id="sidebar-separator"></div>
                        
                        <section id="main" class="clearfix">
                        	<div id="main-header" class="page-header">
                            	<ul class="breadcrumb">
                                	<li>
                                    	<i class="icon-home"></i>MoonCake
                                        <span class="divider">&raquo;</span>
                                    </li>
                                    <li>
                                    	<a href="#">UI</a>
                                        <span class="divider">&raquo;</span>
                                    </li>
                                    <li>
                                    	<a href="#">Bootstrap Elements</a>
                                    </li>
                                </ul>
                                
                                <h1 id="main-heading">
                                	Bootstrap Elements <span>Just a simple show off of all Bootstrap Elements</span>
                                </h1>
                            </div>
                            
                            <div id="main-content">
                                
                                <div class="row-fluid">
                                    <div class="span6">
                                        <div class="widget">
                                            <div class="widget-header">
                                                <span class="title"><i class="icon-progress-bar"></i> Progress Bar Types</span>
                                            </div>
                                            <div class="widget-content form-container">
                                                
                                                <form class="form-horizontal">
                                                    <div class="control-group">
                                                        <label class="control-label">
                                                            Usual Progress Bar
                                                        </label>
                                                        <div class="controls">
                                                            <div class="progress">
                                                                <div class="bar" style="width: 67%; "></div>
                                                            </div>
                                                            <span class="help-block"><code>progress</code></span>
                                                        </div>
                                                    </div>
                                                    <div class="control-group">
                                                        <label class="control-label">
                                                            Progress Bar With Label
                                                        </label>
                                                        <div class="controls">
                                                            <div class="progress">
                                                                <div class="bar" style="width: 67%; ">67%</div>
                                                            </div>
                                                            <span class="help-block"><code>progress</code></span>
                                                        </div>
                                                    </div>
                                                    <div class="control-group">
                                                        <label class="control-label">
                                                            Striped Progress Bar
                                                        </label>
                                                        <div class="controls">
                                                            <div class="progress progress-striped">
                                                                <div class="bar" style="width: 31%; "></div>
                                                            </div>
                                                            <span class="help-block"><code>progress progress-striped</code></span>
                                                        </div>
                                                    </div>
                                                    <div class="control-group">
                                                        <label class="control-label">
                                                            Active Progress Bar
                                                        </label>
                                                        <div class="controls">
                                                            <div class="progress active progress-striped">
                                                                <div class="bar" style="width: 53%; "></div>
                                                            </div>
                                                            <span class="help-block"><code>progress active progress-striped</code></span>
                                                        </div>
                                                    </div>
                                                </form>
                                            
                                            </div>
                                        </div>
                                    </div>

                                    <div class="span6">
                                        <div class="widget">
                                            <div class="widget-header">
                                                <span class="title"><i class="icon-progress-bar"></i> Custom Progress Bar Sizes</span>
                                            </div>
                                            <div class="widget-content form-container">
                                                
                                                <form class="form-horizontal">
                                                    <div class="control-group">
                                                        <label class="control-label">
                                                            Default Progress Bar
                                                        </label>
                                                        <div class="controls">
                                                            <div class="progress">
                                                                <div class="bar" style="width: 67%; "></div>
                                                            </div>
                                                            <span class="help-block"><code>progress</code></span>
                                                        </div>
                                                    </div>
                                                    <div class="control-group">
                                                        <label class="control-label">
                                                            Mini Progress Bar
                                                        </label>
                                                        <div class="controls">
                                                            <div class="progress progress-mini">
                                                                <div class="bar" style="width: 74%; "></div>
                                                            </div>
                                                            <span class="help-block"><code>progress progress-mini</code></span>
                                                        </div>
                                                    </div>
                                                    <div class="control-group">
                                                        <label class="control-label">
                                                            Small Progress Bar
                                                        </label>
                                                        <div class="controls">
                                                            <div class="progress progress-small">
                                                                <div class="bar" style="width: 23%; "></div>
                                                            </div>
                                                            <span class="help-block"><code>progress progress-small</code></span>
                                                        </div>
                                                    </div>
                                                    <div class="control-group">
                                                        <label class="control-label">
                                                            Large Progress Bar
                                                        </label>
                                                        <div class="controls">
                                                            <div class="progress progress-large">
                                                                <div class="bar" style="width: 87%; "></div>
                                                            </div>
                                                            <span class="help-block"><code>progress progress-large</code></span>
                                                        </div>
                                                    </div>
                                                </form>
                                            
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row-fluid">
                                    <div class="span12">
                                    	<div class="widget">
                                        	<div class="widget-header">
                                            	<span class="title"><i class="icon-progress-bar"></i> Progress Bar Colors</span>
                                            </div>
                                            <div class="widget-content form-container">
                                            	
                                                <form class="form-horizontal">
                                                    <div class="control-group">
                                                        <label class="control-label">
                                                            Default Progress Bar
                                                        </label>
                                                        <div class="controls">
                                                            <div class="progress active progress-striped">
                                                                <div class="bar" style="width: 67%; "></div>
                                                            </div>
                                                            <span class="help-block"><code>progress active progress-striped</code></span>
                                                        </div>
                                                    </div>
                                                	<div class="control-group">
                                                    	<label class="control-label">
                                                            Info Progress Bar
                                                        </label>
                                                        <div class="controls">
                                                        	<div class="progress progress-info active progress-striped">
                                                                <div class="bar" style="width: 67%; "></div>
                                                            </div>
                                                            <span class="help-block"><code>progress progress-info active progress-striped</code></span>
                                                        </div>
                                                    </div>
                                                	<div class="control-group">
                                                    	<label class="control-label">
                                                            Success Progress Bar
                                                        </label>
                                                        <div class="controls">
                                                            <div class="progress progress-success active progress-striped">
                                                                <div class="bar" style="width: 55%; "></div>
                                                            </div>
                                                            <span class="help-block"><code>progress progress-success active progress-striped</code></span>
                                                        </div>
                                                    </div>
                                                	<div class="control-group">
                                                    	<label class="control-label">
                                                            Warning Progress Bar
                                                        </label>
                                                        <div class="controls">
                                                            <div class="progress progress-warning active progress-striped">
                                                                <div class="bar" style="width: 75%; "></div>
                                                            </div>
                                                            <span class="help-block"><code>progress progress-warning active progress-striped</code></span>
                                                        </div>
                                                    </div>
                                                	<div class="control-group">
                                                    	<label class="control-label">
                                                            Danger Progress Bar
                                                        </label>
                                                        <div class="controls">
                                                            <div class="progress progress-danger active progress-striped">
                                                                <div class="bar" style="width: 32%; "></div>
                                                            </div>
                                                            <span class="help-block"><code>progress progress-danger active progress-striped</code></span>
                                                        </div>
                                                    </div>
                                                </form>
                                            
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row-fluid">
                                    
                                	<div class="span12">

                                        <div class="widget">
                                            <div class="widget-header">
                                                <span class="title">
                                                    <i class="icon-fullscreen"></i> Modal
                                                </span>
                                            </div>
                                            <div class="widget-content">
                                                <div class="btn-toolbar" style="text-align: center;">
                                                    <button data-target="#basic-modal" data-toggle="modal" class="btn btn-primary">Basic Modal</button>
                                                    <button data-target="#header-modal" data-toggle="modal" class="btn btn-warning">Modal with Header</button>
                                                    <button data-target="#anim-modal" data-toggle="modal" class="btn btn-success">Animated Modal</button>
                                                </div>
                                                
                                                <div id="basic-modal" class="modal hide">
                                                    <div class="modal-body">
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec massa tellus, vestibulum consectetur vulputate eget, posuere adipiscing odio. Aliquam vestibulum sodales lectus, eu blandit lorem.</p>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <a href="#" class="btn btn-primary" data-dismiss="modal">Close</a>
                                                    </div>
                                                </div>
                                                <div id="header-modal" class="modal hide">
                                                    <div class="modal-header">
                                                        <button class="close" type="button" data-dismiss="modal">&times;</button>
                                                        This is a modal header
                                                    </div>
                                                    <div class="modal-body">
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec massa tellus, vestibulum consectetur vulputate eget, posuere adipiscing odio. Aliquam vestibulum sodales lectus, eu blandit lorem.</p>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <a href="#" class="btn btn-primary" data-dismiss="modal">Close</a>
                                                    </div>
                                                </div>
                                                <div id="anim-modal" class="modal fade hide">
                                                    <div class="modal-header">
                                                        <button class="close" type="button" data-dismiss="modal">&times;</button>
                                                        This is a modal header
                                                    </div>
                                                    <div class="modal-body">
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec massa tellus, vestibulum consectetur vulputate eget, posuere adipiscing odio. Aliquam vestibulum sodales lectus, eu blandit lorem.</p>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <a href="#" class="btn btn-primary" data-dismiss="modal">Close</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <h2 class="sub"><span>Tab Controls</span></h2>
                                
                                <div class="row-fluid">
                                
                                	<div class="span6">
                                    	<div class="section">
                                            <h4 class="sub"><span>Basic Tabs</span></h4>
                                            <ul class="nav nav-tabs">
                                                <li class="active"><a href="#tab-001" data-toggle="tab">First Tab</a></li>
                                                <li><a href="#tab-002" data-toggle="tab">Second Tab</a></li>
                                                <li><a href="#tab-003" data-toggle="tab">Third Tab</a></li>
                                            </ul>
                                            <div class="tab-content">
                                                <div class="tab-pane active" id="tab-001">
                                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultrices tempus tortor eget malesuada. Nunc ac euismod nisi. Pellentesque interdum bibendum enim ut accumsan. Cras fermentum tincidunt aliquet. Fusce pretium bibendum justo, et tristique risus sagittis id. Vivamus posuere, velit sit amet blandit tincidunt, leo felis porttitor diam, a vulputate ante lectus sed ipsum. In consequat, orci quis auctor viverra, dolor nisl lacinia lectus, ac placerat sapien erat volutpat sapien. Aliquam vel purus augue, et ultrices ante. Vestibulum eget mi lacus. Suspendisse vel erat elit. Quisque nibh orci, auctor vitae consectetur ornare, vestibulum eget urna. Vivamus lacinia molestie urna non posuere. Nam ipsum dui, pulvinar tincidunt convallis eget, facilisis ut felis.</p>
                                                </div>
                                                <div class="tab-pane" id="tab-002">
                                                    <p>Praesent eu mauris ac felis molestie dictum. Sed volutpat ullamcorper iaculis. Praesent sed accumsan massa. Donec molestie vulputate massa vitae viverra. Nulla vitae hendrerit urna. Ut sit amet lectus non nunc venenatis vehicula et ut justo. Phasellus varius quam eu felis feugiat non consequat magna fermentum. Pellentesque consequat risus non est aliquam eu consectetur dui laoreet. Aliquam turpis est, aliquam non pellentesque ac, volutpat id nisi.</p>
                                                </div>
                                                <div class="tab-pane" id="tab-003">
                                                    <p>Suspendisse lacinia euismod ligula. Nullam sed est sem, nec sodales erat. Phasellus ipsum orci, scelerisque non faucibus ac, hendrerit ut massa. Praesent ornare justo non turpis convallis sit amet porta urna adipiscing. Donec ac neque non risus tristique commodo non et neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris tincidunt augue vitae risus lacinia sed tempor ligula dapibus. Proin et turpis lacus, eget convallis risus.</p>
                                                </div>
                                            </div>
                                        </div>
                                    	<div class="section">
                                            <h4 class="sub"><span>Basic Pills</span></h4>
                                            <ul class="nav nav-pills">
                                                <li class="active"><a href="#tab-0001" data-toggle="tab">First Tab</a></li>
                                                <li><a href="#tab-0002" data-toggle="tab">Second Tab</a></li>
                                                <li><a href="#tab-0003" data-toggle="tab">Third Tab</a></li>
                                            </ul>
                                            <div class="tab-content">
                                                <div class="tab-pane active" id="tab-0001">
                                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultrices tempus tortor eget malesuada. Nunc ac euismod nisi. Pellentesque interdum bibendum enim ut accumsan. Cras fermentum tincidunt aliquet. Fusce pretium bibendum justo, et tristique risus sagittis id. Vivamus posuere, velit sit amet blandit tincidunt, leo felis porttitor diam, a vulputate ante lectus sed ipsum. In consequat, orci quis auctor viverra, dolor nisl lacinia lectus, ac placerat sapien erat volutpat sapien. Aliquam vel purus augue, et ultrices ante. Vestibulum eget mi lacus. Suspendisse vel erat elit. Quisque nibh orci, auctor vitae consectetur ornare, vestibulum eget urna. Vivamus lacinia molestie urna non posuere. Nam ipsum dui, pulvinar tincidunt convallis eget, facilisis ut felis.</p>
                                                </div>
                                                <div class="tab-pane" id="tab-0002">
                                                    <p>Praesent eu mauris ac felis molestie dictum. Sed volutpat ullamcorper iaculis. Praesent sed accumsan massa. Donec molestie vulputate massa vitae viverra. Nulla vitae hendrerit urna. Ut sit amet lectus non nunc venenatis vehicula et ut justo. Phasellus varius quam eu felis feugiat non consequat magna fermentum. Pellentesque consequat risus non est aliquam eu consectetur dui laoreet. Aliquam turpis est, aliquam non pellentesque ac, volutpat id nisi.</p>
                                                </div>
                                                <div class="tab-pane" id="tab-0003">
                                                    <p>Suspendisse lacinia euismod ligula. Nullam sed est sem, nec sodales erat. Phasellus ipsum orci, scelerisque non faucibus ac, hendrerit ut massa. Praesent ornare justo non turpis convallis sit amet porta urna adipiscing. Donec ac neque non risus tristique commodo non et neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris tincidunt augue vitae risus lacinia sed tempor ligula dapibus. Proin et turpis lacus, eget convallis risus.</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                	<div class="span6">
                                    	<div class="widget">
                                            <div class="widget-header">
                                                <span class="title">Tab Widget</span>
                                                <div class="toolbar">
                                                    <ul class="nav nav-pills">
                                                        <li class="active"><a href="#tab-01" data-toggle="tab">First Tab</a></li>
                                                        <li><a href="#tab-02" data-toggle="tab">Second Tab</a></li>
                                                        <li><a href="#tab-03" data-toggle="tab">Third Tab</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <div class="tab-content">
                                                <div class="tab-pane active" id="tab-01">
                                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultrices tempus tortor eget malesuada. Nunc ac euismod nisi. Pellentesque interdum bibendum enim ut accumsan. Cras fermentum tincidunt aliquet. Fusce pretium bibendum justo, et tristique risus sagittis id. Vivamus posuere, velit sit amet blandit tincidunt, leo felis porttitor diam, a vulputate ante lectus sed ipsum. In consequat, orci quis auctor viverra, dolor nisl lacinia lectus, ac placerat sapien erat volutpat sapien. Aliquam vel purus augue, et ultrices ante. Vestibulum eget mi lacus. Suspendisse vel erat elit. Quisque nibh orci, auctor vitae consectetur ornare, vestibulum eget urna. Vivamus lacinia molestie urna non posuere. Nam ipsum dui, pulvinar tincidunt convallis eget, facilisis ut felis.</p>
                                                </div>
                                                <div class="tab-pane" id="tab-02">
                                                    <p>Praesent eu mauris ac felis molestie dictum. Sed volutpat ullamcorper iaculis. Praesent sed accumsan massa. Donec molestie vulputate massa vitae viverra. Nulla vitae hendrerit urna. Ut sit amet lectus non nunc venenatis vehicula et ut justo. Phasellus varius quam eu felis feugiat non consequat magna fermentum. Pellentesque consequat risus non est aliquam eu consectetur dui laoreet. Aliquam turpis est, aliquam non pellentesque ac, volutpat id nisi.</p>
                                                </div>
                                                <div class="tab-pane" id="tab-03">
                                                    <p>Suspendisse lacinia euismod ligula. Nullam sed est sem, nec sodales erat. Phasellus ipsum orci, scelerisque non faucibus ac, hendrerit ut massa. Praesent ornare justo non turpis convallis sit amet porta urna adipiscing. Donec ac neque non risus tristique commodo non et neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris tincidunt augue vitae risus lacinia sed tempor ligula dapibus. Proin et turpis lacus, eget convallis risus.</p>
                                                </div>
                                            </div>
                                        </div>
                                        
                                    	<div class="widget">
                                            <div class="widget-header light">
                                                <span class="title">Tab Widget With Dropdown</span>
                                                <div class="toolbar">
                                                    <ul class="nav nav-tabs">
                                                        <li class="active"><a href="#tab-00001" data-toggle="tab">First Tab</a></li>
                                                        <li><a href="#tab-00002" data-toggle="tab">Second Tab</a></li>
                                                        <li class="dropdown pull-right">
                                                        	<a href="#" data-toggle="dropdown">
                                                            	Dropdown Tab <b class="caret"></b>
                                                            </a>
                                                            <ul class="dropdown-menu">
                                                            	<li><a href="#tab-11" data-toggle="tab">First menu</a></li>
                                                            	<li><a href="#tab-12" data-toggle="tab">Second menu</a></li>
                                                                <li class="divider"></li>
                                                            	<li><a href="#tab-13" data-toggle="tab">Third menu</a></li>
                                                            </ul>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <div class="tab-content">
                                                <div class="tab-pane active" id="tab-00001">
                                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultrices tempus tortor eget malesuada. Nunc ac euismod nisi. Pellentesque interdum bibendum enim ut accumsan. Cras fermentum tincidunt aliquet. Fusce pretium bibendum justo, et tristique risus sagittis id. Vivamus posuere, velit sit amet blandit tincidunt, leo felis porttitor diam, a vulputate ante lectus sed ipsum. In consequat, orci quis auctor viverra, dolor nisl lacinia lectus, ac placerat sapien erat volutpat sapien. Aliquam vel purus augue, et ultrices ante. Vestibulum eget mi lacus. Suspendisse vel erat elit. Quisque nibh orci, auctor vitae consectetur ornare, vestibulum eget urna. Vivamus lacinia molestie urna non posuere. Nam ipsum dui, pulvinar tincidunt convallis eget, facilisis ut felis.</p>
                                                </div>
                                                <div class="tab-pane" id="tab-00002">
                                                    <p>Praesent eu mauris ac felis molestie dictum. Sed volutpat ullamcorper iaculis. Praesent sed accumsan massa. Donec molestie vulputate massa vitae viverra. Nulla vitae hendrerit urna. Ut sit amet lectus non nunc venenatis vehicula et ut justo. Phasellus varius quam eu felis feugiat non consequat magna fermentum. Pellentesque consequat risus non est aliquam eu consectetur dui laoreet. Aliquam turpis est, aliquam non pellentesque ac, volutpat id nisi.</p>
                                                </div>
                                                <div class="tab-pane" id="tab-11">
                                                	<p>Aenean placerat luctus diam, eget laoreet diam pellentesque quis. Ut diam magna, commodo eu malesuada eget, convallis a libero. Vivamus pharetra, lacus at commodo eleifend, magna velit facilisis elit, a vehicula metus ligula sit amet tellus. Curabitur nisi leo, facilisis sit amet luctus quis, aliquet vel ante. Etiam facilisis adipiscing tellus nec fringilla. Ut at suscipit quam.</p>
                                                </div>
                                                <div class="tab-pane" id="tab-12">
                                                	<p>Aliquam erat volutpat. Pellentesque porta pulvinar nibh, id elementum odio convallis vitae. Donec nulla sapien, suscipit quis eleifend non, hendrerit nec felis. Vivamus non leo id turpis consequat pharetra at ut est. Phasellus magna odio, mattis ac convallis eget, tempus sit amet velit. In sed est risus.</p>
                                                </div>
                                                <div class="tab-pane" id="tab-13">
                                                	<p>Phasellus euismod hendrerit metus, tincidunt lacinia augue malesuada quis. In hac habitasse platea dictumst. Mauris nec sapien ut neque molestie tincidunt. Aenean egestas, metus eu fringilla varius, risus lorem aliquet est, at adipiscing orci tellus et lorem. Nulla porta ante nec mi rhoncus vitae consequat arcu pellentesque. Pellentesque et lacinia mauris.</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                
                                </div>
                                
                                <h2 class="sub"><span>Collapsible</span></h2>
                                
                                <div class="row-fluid">
                                	<div class="span6 section">
	                                    <h4 class="sub"><span>Basic Accordion</span></h4>
                                        
                                    	<div id="demo-accordion-01" class="accordion">
                                        	
                                            <div class="accordion-group">
                                            	<div class="accordion-heading">
                                                	<a class="accordion-toggle" data-toggle="collapse" data-parent="#demo-accordion-01" href="#collapse-01">
	                                                    Aenean placerat luctus diam, eget laoreet diam pellentesque quis.
                                                    </a>
                                                </div>
                                                <div id="collapse-01" class="collapse">
                                                	<div class="accordion-inner">
                                                    	<p>Phasellus euismod hendrerit metus, tincidunt lacinia augue malesuada quis. In hac habitasse platea dictumst. Mauris nec sapien ut neque molestie tincidunt. Aenean egestas, metus eu fringilla varius, risus lorem aliquet est, at adipiscing orci tellus et lorem. Nulla porta ante nec mi rhoncus vitae consequat arcu pellentesque. Pellentesque et lacinia mauris.</p>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div class="accordion-group">
                                            	<div class="accordion-heading">
                                                	<a class="accordion-toggle" data-toggle="collapse" data-parent="#demo-accordion-01" href="#collapse-02">
	                                                    Aenean placerat luctus diam, eget laoreet diam pellentesque quis.
                                                    </a>
                                                </div>
                                                <div id="collapse-02" class="collapse">
                                                	<div class="accordion-inner">
                                                    	<p>Phasellus euismod hendrerit metus, tincidunt lacinia augue malesuada quis. In hac habitasse platea dictumst. Mauris nec sapien ut neque molestie tincidunt. Aenean egestas, metus eu fringilla varius, risus lorem aliquet est, at adipiscing orci tellus et lorem. Nulla porta ante nec mi rhoncus vitae consequat arcu pellentesque. Pellentesque et lacinia mauris.</p>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div class="accordion-group">
                                            	<div class="accordion-heading">
                                                	<a class="accordion-toggle" data-toggle="collapse" data-parent="#demo-accordion-01" href="#collapse-03">
	                                                    Aenean placerat luctus diam, eget laoreet diam pellentesque quis.
                                                    </a>
                                                </div>
                                                <div id="collapse-03" class="collapse">
                                                	<div class="accordion-inner">
                                                    	<p>Phasellus euismod hendrerit metus, tincidunt lacinia augue malesuada quis. In hac habitasse platea dictumst. Mauris nec sapien ut neque molestie tincidunt. Aenean egestas, metus eu fringilla varius, risus lorem aliquet est, at adipiscing orci tellus et lorem. Nulla porta ante nec mi rhoncus vitae consequat arcu pellentesque. Pellentesque et lacinia mauris.</p>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                        </div>
                                    
                                    </div>
                                    
                                	<div class="span6 widget">
                                    	<div class="widget-header">
                                        	<span class="title">Accordion Widget</span>
                                        </div>
                                        
                                    	<div id="demo-accordion-02" class="accordion">
                                        	
                                            <div class="accordion-group">
                                            	<div class="accordion-heading">
                                                	<a class="accordion-toggle" data-toggle="collapse" data-parent="#demo-accordion-02" href="#collapse-04">
	                                                    Aenean placerat luctus diam, eget laoreet diam pellentesque quis.
                                                    </a>
                                                </div>
                                                <div id="collapse-04" class="collapse">
                                                	<div class="accordion-inner">
                                                    	<p>Phasellus euismod hendrerit metus, tincidunt lacinia augue malesuada quis. In hac habitasse platea dictumst. Mauris nec sapien ut neque molestie tincidunt. Aenean egestas, metus eu fringilla varius, risus lorem aliquet est, at adipiscing orci tellus et lorem. Nulla porta ante nec mi rhoncus vitae consequat arcu pellentesque. Pellentesque et lacinia mauris.</p>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div class="accordion-group">
                                            	<div class="accordion-heading">
                                                	<a class="accordion-toggle" data-toggle="collapse" data-parent="#demo-accordion-02" href="#collapse-05">
	                                                    Aenean placerat luctus diam, eget laoreet diam pellentesque quis.
                                                    </a>
                                                </div>
                                                <div id="collapse-05" class="collapse">
                                                	<div class="accordion-inner">
                                                    	<p>Phasellus euismod hendrerit metus, tincidunt lacinia augue malesuada quis. In hac habitasse platea dictumst. Mauris nec sapien ut neque molestie tincidunt. Aenean egestas, metus eu fringilla varius, risus lorem aliquet est, at adipiscing orci tellus et lorem. Nulla porta ante nec mi rhoncus vitae consequat arcu pellentesque. Pellentesque et lacinia mauris.</p>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div class="accordion-group">
                                            	<div class="accordion-heading">
                                                	<a class="accordion-toggle" data-toggle="collapse" data-parent="#demo-accordion-02" href="#collapse-06">
	                                                    Aenean placerat luctus diam, eget laoreet diam pellentesque quis.
                                                    </a>
                                                </div>
                                                <div id="collapse-06" class="collapse">
                                                	<div class="accordion-inner">
                                                    	<p>Phasellus euismod hendrerit metus, tincidunt lacinia augue malesuada quis. In hac habitasse platea dictumst. Mauris nec sapien ut neque molestie tincidunt. Aenean egestas, metus eu fringilla varius, risus lorem aliquet est, at adipiscing orci tellus et lorem. Nulla porta ante nec mi rhoncus vitae consequat arcu pellentesque. Pellentesque et lacinia mauris.</p>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                        </div>
                                    
                                    </div>
                                </div>
                                
                                <div class="row-fluid">
                                    
                                	<div class="span6 widget">
                                    
                                    	<div class="widget-content body">
                                        	<h4>Popovers</h4>
                                            
                                        	<div class="row-fluid show-grid">
                                            	<div class="span4"></div>
                                            	<div class="span4" rel="popover" data-trigger="hover" title="Euphoria" data-placement="top" data-content="Euphoria (semantically opposite of dysphoria) is medically recognized as a mental and emotional condition in which a person experiences intense feelings of well-being, elation, happiness, ecstasy, excitement, and joy.">Top</div>
                                            	<div class="span4"></div>
                                            </div>
                                        	<div class="row-fluid show-grid">
                                            	<div class="span4" rel="popover" data-trigger="hover" title="Asthma" data-placement="left" data-content="Asthma is the common chronic inflammatory disease of the airways characterized by variable and recurring symptoms, reversible airflow obstruction, and bronchospasm.">Left</div>
                                            	<div class="span4"></div>
                                            	<div class="span4" rel="popover" data-trigger="hover" title="Wing" data-placement="right" data-content="A wing is an appendage with a surface that produces lift for flight or propulsion through the atmosphere, or through another gaseous or liquid fluid. A wing is an airfoil, which has a streamlined cross-sectional shape producing a useful lift to drag ratio.">Right</div>
                                            </div>
                                        	<div class="row-fluid show-grid">
                                            	<div class="span4"></div>
                                            	<div class="span4" rel="popover" data-trigger="hover" title="Sillicone" data-placement="bottom" data-content="Silicones are inert, synthetic compounds with a variety of forms and uses. Typically heat-resistant and rubber-like, they are used in sealants, adhesives, lubricants, medical applications (e.g., breast implants), cookware, and insulation.">Bottom</div>
                                            	<div class="span4"></div>
                                            </div>
                                        </div>
                                    
                                    </div>
                                    
                                	<div class="span6 widget">
                                    
                                    	<div class="widget-content body">
                                        	<h4>Tooltips</h4>
                                            
                                        	<div class="row-fluid show-grid">
                                            	<div class="span4"></div>
                                            	<div class="span4" rel="tooltip" title="Top" data-placement="top">Top</div>
                                            	<div class="span4"></div>
                                            </div>
                                        	<div class="row-fluid show-grid">
                                            	<div class="span4" rel="tooltip" title="Left" data-placement="left">Left</div>
                                            	<div class="span4"></div>
                                            	<div class="span4" rel="tooltip" title="Right" data-placement="right">Right</div>
                                            </div>
                                        	<div class="row-fluid show-grid">
                                            	<div class="span4"></div>
                                            	<div class="span4" rel="tooltip" title="Bottom" data-placement="bottom">Bottom</div>
                                            	<div class="span4"></div>
                                            </div>
                                        </div>
                                    
                                    </div>
                                
                                </div>

                                <div class="row-fluid">
                                    <div class="span6">
                                        <div class="widget">
                                            <div class="widget-content body">
                                                <h4>Pagination</h4>
                                                <div class="pagination">
                                                    <ul>
                                                        <li><a href="#">«</a></li>
                                                        <li><a href="#">1</a></li>
                                                        <li><a href="#">2</a></li>
                                                        <li><a href="#">3</a></li>
                                                        <li><a href="#">4</a></li>
                                                        <li><a href="#">5</a></li>
                                                        <li><a href="#">»</a></li>
                                                    </ul>
                                                </div>

                                                <h4>Centered Pagination</h4>
                                                <div class="pagination pagination-centered">
                                                    <ul>
                                                        <li><a href="#">«</a></li>
                                                        <li><a href="#">1</a></li>
                                                        <li><a href="#">2</a></li>
                                                        <li><a href="#">3</a></li>
                                                        <li><a href="#">4</a></li>
                                                        <li><a href="#">5</a></li>
                                                        <li><a href="#">»</a></li>
                                                    </ul>
                                                </div>

                                                <h4>Right Pagination</h4>
                                                <div class="pagination pagination-right">
                                                    <ul>
                                                        <li><a href="#">«</a></li>
                                                        <li><a href="#">1</a></li>
                                                        <li><a href="#">2</a></li>
                                                        <li><a href="#">3</a></li>
                                                        <li><a href="#">4</a></li>
                                                        <li><a href="#">5</a></li>
                                                        <li><a href="#">»</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="span6">
                                        <div class="widget">
                                            <div class="widget-content body">
                                                <h4>Pager</h4>
                                                <ul class="pager">
                                                    <li class="previous"><a href="#">← Older</a></li>
                                                    <li class="next"><a href="#">Newer →</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="widget">
                                            <div class="widget-content body">
                                                <h4>Disabled Pager</h4>
                                                <ul class="pager">
                                                    <li class="previous disabled"><a href="#">← Older</a></li>
                                                    <li class="next disabled"><a href="#">Newer →</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>                                
                            </div>
                        </section>
                    </div>
                </div>
            </div>
        </div>
        
        <footer id="footer">
            <div class="footer-left">MoonCake - Responsive Admin Template</div>
            <div class="footer-right"><p>Copyright 2012. All Rights Reserved.</p></div>
        </footer>
        
    </div>

	<!-- Core Scripts -->
	<script src="assets/js/libs/jquery-1.8.3.min.js"></script>
	<script src="bootstrap/js/bootstrap.min.js"></script>
	<script src="assets/js/libs/jquery.placeholder.min.js"></script>
	<script src="assets/js/libs/jquery.mousewheel.min.js"></script>
    
    <!-- Template Script -->
    <script src="assets/js/template.js"></script>
    <script src="assets/js/setup.js"></script>

    <!-- Customizer, remove if not needed -->
    <script src="assets/js/customizer.js"></script>

    <!-- Uniform Script -->
    <script src="plugins/uniform/jquery.uniform.min.js"></script>
    
    <!-- jquery-ui Scripts -->
    <script src="assets/jui/js/jquery-ui-1.9.2.min.js"></script>
    <script src="assets/jui/jquery-ui.custom.min.js"></script>
    <script src="assets/jui/timepicker/jquery-ui-timepicker.min.js"></script>
	<script src="assets/jui/jquery.ui.touch-punch.min.js"></script>
    
    <!-- Plugin Scripts -->
    
    <!-- Demo Scripts -->

</body>

</html>
